<template>
  <header>
    <span id="text1">团检信息管理</span>
  </header>

  <div class="center">
    <div class="search">
      <TzwInput
      inputTitle="信息查询:"
      Tplaceholder="请输入联系人姓名或电话或公司名"
      @getInput="getSearchInput"
      ></TzwInput>
       <div style="display: flex; justify-content: space-between; width: 30%; height: 2.5rem; padding: 0 2rem; box-sizing: border-box; position: relative; left: -34rem;" class="buttonManage">
      <button style="width: 4.5rem;" @click="searchOrderName">查询</button>
      <button style="width: 4.5rem;" @click="resetAll">重置</button>
      <button style="width: 4.5rem;" @click="cliclAdd">添加</button>
      <button style="width: 4.5rem;" @click="deleteAll">删除</button>
      </div>
    </div>
    <TzwTable :head="tableHead" :tableData="tableData2" class="TzwTable" @getChoose="choose2Del">
        <template v-slot="{lv}">
          <button class="operationB" @click="eidtInform(lv)">编辑</button>
           <el-popconfirm
    confirm-button-text="确认"
    cancel-button-text="取消"
    :icon="InfoFilled"
    icon-color="#626AEF"
    title="确认要删除吗?"
    @confirm="deleteOrder1(lv.id)"
  >
    <template #reference>
      <button class="operationB">删除</button>
    </template>
  </el-popconfirm>
        <button class="operationB" @click="goDetail(lv.id)">详情</button>
        </template>
    </TzwTable>
    <el-dialog v-model="dialogTableVisible" title="个人体检信息" style="width: 75rem; height: 40rem;">
      <div style="margin-left: -2rem; height: 4rem; width: 73rem; display: flex; justify-content: space-between; padding: 0.5rem;">
      <TzwInput
      inputTitle="团检单位:"
      :Tplaceholder="companyInput?companyInput:'请输入公司名称'"
      @getInput="getCompanyInput"
      ></TzwInput>  
      <TzwInput
      inputTitle="联系人姓名:"
      :Tplaceholder="nameAddInput?nameAddInput:'请输入负责人姓名'"
      @getInput="getNameAddInput"
      ></TzwInput>
      <TzwInput
      inputTitle="联系人电话:"
      :Tplaceholder="telAddInput?telAddInput:'请输入负责人电话'"
      @getInput="getTelAddInput"
      ></TzwInput>
    </div>
    <div style="display: flex; justify-content: space-between;">
        <el-transfer
    v-model="valueOrgan"
    filterable
    filter-placeholder="请输入分支机构"
    :data="dataOrgan"
    :titles="['机构','已选']"
    @change="chooseIns"
  />
  <el-transfer
    v-model="valueOrder"
    filterable
    filter-placeholder="请输入套餐名"
    :data="dataOrder"
    :titles="['套餐','已选']"
    @change="chooseFinal"
  />
    </div>
    <div style="margin-top: 1rem;">
        <el-form-item label="备注" style="font-size: 1.2rem; height: 4rem;">
      <el-input v-model="remark" type="textarea" style="height: 4rem; font-size: 1.2rem;"/>
    </el-form-item>
    </div>
    <div style="height: 2rem; width: 75rem; display: flex; justify-content: space-evenly; padding-top: 2.5rem;">
      <button class="addButton" @click="addUpload">确认</button>
      <button class="addButton" @click="dialogTableVisible= false">取消</button>
    </div>
  </el-dialog>
  <div style="padding-left: 70%; width: 100%; padding-top: 0.5rem; margin-top: 1rem;">
    <TzwPage  :sum="pageSum" :size="pageSize" :now="nowPage" @prePage="toPrePage" @nextPage="toNextPage"></TzwPage>
  </div>
  </div>
</template>
<style lang="less" scoped>
header {
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1.4rem;
  line-height: 3rem;
  height: 4rem;
  background-color: white;

  #text1 {
    position: relative;
    top: 0.4rem;
    left: 1rem;
    font-size: 1.4rem;
    line-height: 3rem;
  }
  .m-2 {
    position: relative;
    top: 0rem;
    left: 2rem;
  }
}
.center {
  margin: auto;
  height: 87%;
  background-color: white;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  .search {
    height: 8.5%;
    padding-top: 0.5rem;
    line-height: 15%;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #e3e1e1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .buttonManage button{
    border-radius: 0.3rem; border: mistyrose 1px solid; background-color: white; padding: 0;font-size: 1.2rem;
    &:hover{
      background-color: rgb(223, 220, 220);
    }
  }
  .addButton{
    border-radius: 0.3rem; border: mistyrose 1px solid; background-color: white; padding-bottom: 2.3rem;font-size: 1.6rem;
    &:hover{
      background-color: rgb(223, 220, 220);
    }
  }
  :deep(.el-dialog__title){
    font-size: 2rem;
  }
  :deep(.el-dialog__header){
    padding: 2rem;
    width: 50rem;
    height: 2rem;
  }
  :deep(.el-dialog__body){
    padding: 2rem;
  }
  :deep(.el-dialog__headerbtn){
    width: 4rem;
    height: 4rem;}
  }
.TzwTable{
  margin-top: 1rem;
  .operationB{
    border: none; background-color: white; color: #1abc9c; font-size: 1rem; width: 3rem; height: 1.2rem; padding: 0;
    &:hover{
      color: darkslategrey;
    }
  }
}
:deep(.el-transfer-panel){
    width: 13.5rem;
    height: 16rem;
    border: rgb(226, 223, 223) 0.1rem solid;

}
:deep(.el-checkbox-group){
  height: 8rem;
}
:deep(.el-transfer__buttons){
    padding: 0;
    margin: 0;
}
:deep(.el-checkbox__label){
  width: 3rem;
  padding: 0.5rem;
}
</style>

<script lang="ts" setup>
import { reactive, ref,onMounted} from "vue";
import TzwInput from "../components/TzwInput.vue";
import TzwSelect from "../components/TzwSelect.vue";
import TzwTable from "../components/TzwTable.vue";
import TzwPage from "../components/TzwPage.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import {updateCompany,findSubOrganOrder,findAllInsOrder,findAll,addCompany,findAllOrgan,findOrder,deleteOrder,deletesOrder,searchOrder} from '../apis/groupCompany';
import { useRouter } from "vue-router";
import { InfoFilled } from '@element-plus/icons-vue'
const router=useRouter();
let pageSize=ref(5)
let pageSum=ref(12)
let nowPage=ref(1)
let toPrePage=(ev)=>{
  nowPage.value=ev
}
let toNextPage=(ev)=>{
  nowPage.value=ev
}
let goDetail=(id)=>{
  router.push({
    path:'/Home/GroupDetail',
    query:{
      companyId:id,
    }
  })
}
let n1=0;
let allInstitutionOrder=[]
let allInstitution=reactive([])
let createMenu=(v)=>{
  if(n1<v.length){
    findSubOrganOrder(v[n1]).then((data1)=>{
    allInstitutionOrder.push({
      orderId:data1.data.data.id,
      orderName:data1.data.data.name,
      subOrganId:data1.data.data.subOrganId,
      subOrganName:data1.data.data.subOrganName,
    })  
    n1++;
    createMenu(v)
  })
  }else{
    n1=0; 
    allInstitutionOrder.forEach((e,j)=>{
      allInstitution.forEach((h,i)=>{
        if(h.name==e.subOrganName){
          allInstitution.splice(i,1)
        }
      })
      allInstitution.push({name:e.subOrganName,id:e.subOrganId})
    })
    dataOrgan.forEach((t)=>{
      allInstitution.forEach((h)=>{
        if(h.name==t.label){
          valueOrgan.value.push(t.key)
        }
      })
    })
    chooseIns(valueOrgan.value)
    setTimeout(()=>{
      for(let m=0;m<v.length;m++){
        dataOrder.forEach((s)=>{
          if(v[m]==s.orderId){
            valueOrder.value.push(s.key)
          }
        })
      } 
    },1000)
  }
}
let dialogTableVisible=ref(false)
let toEdit=0
let eidtInform=(lv)=>{
    cliclAdd()
    ElMessage('数据加载中')
    toEdit=lv.id
    findAllInsOrder(lv.id).then(({data})=>{
  let n2=data.data[0].pid;
  n2=n2.slice(1,-1);
  n2=n2.split(',')
  createMenu(n2)
})
  companyInput.value=lv.company
  nameAddInput.value=lv.contact
  telAddInput.value=lv.contactTel
  findAllData.forEach((v)=>{
    if(v.id==lv.id){
      remark.value=v.discription
    }
  })
}
let resetAll=()=>{
  history.go(0)
}
watch(dialogTableVisible,()=>{
  if(dialogTableVisible.value==false){
    companyInput.value='';
    nameAddInput.value='';
    telAddInput.value='';
    dataOrgan.length=0;
    dataOrder.length=0;
    finalOrder.length=0;
    valueOrder.value.length=0;
    valueOrgan.value.length=0;
    
  }
  
})
let searchOrderName=()=>{
  searchOrder({condition:searchInput.value,
  id:0,
  limit:0,
  page:0
  }).then((res)=>{

    tableData1.length=0;
    tableData1.push(...res.data.data)
    searchInput.value=''
  })
}
let dialogOrder=ref(false)
let remark=ref('')
let deleteMutli=reactive([])
const valueTime = ref('')
let choose2Del=(ev)=>{
  if(ev.length || ev=="null"){
    deleteMutli.length=0;
    if(ev=='null'){
    }else{
      deleteMutli.push(...ev)
    }
  }else{
    let nn=0
  deleteMutli.forEach((v,i)=>{
    if(ev.id==v.id){
      deleteMutli.splice(i,1)
      nn=1
    }  
  });
  if(nn==0){
    deleteMutli.push(ev)
  }
  }
}
let deleteAll=()=>{
  let nnn=[]
  deleteMutli.forEach((v)=>{
    nnn.push(v.id)
  })
  deletesOrder({ids:nnn}).then((res)=>{ 
    if(res.data.code==0){
      ElMessage('删除成功')
      setTimeout(()=>{resetAll()},1000)
    }
  })
}
let tableHead=[
  {name:'编码',width:'9rem'},
  {name:'团检单位',width:'11rem'},
  {name:'团检总人数',width:'8rem'},
  {name:'已预约人数',width:'8rem'},
  {name:'已体检人数',width:'8rem'},
  {name:'联系人',width:'7rem'},
  {name:'联系人电话',width:'13rem'},
  {name:'操作',width:'13rem'},
]
let tableData1=reactive([])
let tableData2=reactive([])
let findAllData=[]
let render=()=>{
  tableData1.length=0
  findAll().then((res)=>{
    console.log(res.data.data);
    tableData1.push(...res.data.data.map((v)=>{
      findAllData.push({id:v.id,discription:v.discription})
      delete v.createTime;
      delete v.updateTime;
      delete v.discription;
      v.allNumber=v.allNumber?v.allNumber:0;
      v.bookingNumber=v.bookingNumber?v.bookingNumber:0;
      v.finishNumber=v.finishNumber?v.finishNumber:0;
      return v
    }))   
  })
  tableData2.length=0;
  tableData2.push(...tableData1.slice(0,pageSize.value));
  pageSum.value=tableData1.length
  
}
watch(tableData1,()=>{
  tableData2.length=0;
  pageSum.value=tableData1.length
  tableData2.push(...tableData1.slice(0,pageSize.value));
})
watch(nowPage,()=>{
  tableData2.length=0;
  tableData2.push(...tableData1.slice((nowPage.value-1)*pageSize.value,pageSize.value*nowPage.value))
})
onMounted(()=>{
  render()
})
let company: {
  name: string;
  id: number;
}[] = reactive([
  {
    name: "海尔集团",
    id: 1,
  },
  {
    name: "美的集团",
    id: 2,
  },
]);
let ChosedCampany = ref("海尔集团");
let getCompany = (ev) => {
  ChosedCampany.value = ev;
};
let searchInput=ref('')
let getSearchInput=(ev)=>{
    searchInput.value=ev; 
}
let companyInput=ref('')
let getCompanyInput=(ev)=>{
    companyInput.value=ev;
}
let nameAddInput=ref('')
let getNameAddInput=(ev)=>{
    nameAddInput.value=ev  
}
let telAddInput=ref('')
let getTelAddInput=(ev)=>{
    telAddInput.value=ev  
}
let valueOrgan = ref([])
let dataOrgan =reactive([]) 
let states=[]
const cliclAdd=()=>{
  dialogTableVisible.value = true
  findAllOrgan().then((res)=>{
    states=res.data.data;
    states.forEach((city, index) => {
    dataOrgan.push({
      label: city.name,
      key: index,
    })
  })
  })
}
let statesOrder=[]
let valueOrder=ref([])
let dataOrder=reactive([])
let chooseIns=(v)=>{
  dataOrder.length=0;
  valueOrder.value.length=0
  let nn=0
  let addOrder=()=>{
    findOrder(states[v[nn]].subId).then((res)=>{
      statesOrder=res.data.data;
      statesOrder.forEach((city, index) => {
    dataOrder.push({
      label: city.name,
      key: dataOrder.length,
      organId:states[v[nn]].subId,
      orderId:city.id
    })
  })
      if(v.length>(nn+1)){
        nn++
        addOrder()
      }
    })
  }
  addOrder()
}
let finalOrder=reactive([])
let chooseFinal=(v)=>{
  finalOrder=v.map((h,j)=>{
    for(let i=0;i<dataOrder.length;i++){
      if(dataOrder[i].key==h){     
        return dataOrder[i]
      }
    }
  }) 
}
let addUpload=()=>{
  let order=[]
  let organ=[]
  finalOrder.forEach((v)=>{
    order.push(v.orderId);
    organ.push(v.organId)
  })
  if(toEdit==0){
    addCompany({
    company:companyInput.value,
    contact:nameAddInput.value,
    contactTel:telAddInput.value,
    discription:remark.value,
    packageIds:order,
    subIds:organ
  }).then((res)=>{
    dialogTableVisible.value = false
    ElMessage('添加成功')
    setTimeout(()=>{
      resetAll()
    },1000)
  })
  }else{
    updateCompany({
    company:companyInput.value,
    contact:nameAddInput.value,
    contactTel:telAddInput.value,
    discription:remark.value,
    packageIds:order,
    subIds:organ,
  }).then((res)=>{
    deleteOrder(toEdit).then(()=>{
      dialogTableVisible.value = false
    ElMessage('修改成功')
    setTimeout(()=>{
      resetAll()
    },1000)
    })
  })
  }


}
let deleteOrder1=(Id)=>{
  deleteOrder(Id).then((res)=>{
    render()
  })
}
</script> 
